<template>
  <div id="card">
    <div id="avatar">
      <img src="../../assets/img/Avatar.jpg" alt="">
      <p>{{userName}}[{{getType(userType)}}]</p>
    </div>
    <div id="number">
      <li @click="$router.push('/setting/myConcern')"><h3>{{$store.state.number.focusNum}}</h3><span>关注</span></li>
      <li @click="$router.push('/setting/myCollection')"><h3>{{$store.state.number.collectionNum}}</h3><span>收藏</span></li>
      <li @click="$router.push('/setting/myDynamic')" style="border-right: none"><h3>{{$store.state.number.dynamicNum}}</h3><span>动态</span></li>
    </div>
  </div>
</template>

<script>
import {getUnitCount} from "../../network/user"
export default {
  name: "Card",
  data(){
    return{
      num:{
        collectionNum:0,
        dynamicNum:0,
        focusNum:0
      },
      userName:localStorage.getItem('userName'),
      userType:localStorage.getItem('userType'),
      userId:localStorage.getItem('userId')

    }
  },
  created() {
    this.getNum()
  },
  methods:{
    getNum(){
      getUnitCount(this.userType,this.userId)
      .then(res=>{
        console.log(res)
        let data=res.data.extend
        this.num.collectionNum=data.collectionCount
        this.num.focusNum=data.concernCount
        this.num.dynamicNum=data.dynamicCount
        this.$store.state.number=this.num
      })
    },

    getType(userType){
      if(userType=='university'){
        return '高校'
      }else if(userType=='company'){
        return '企业'
      }else {
        return '学生'
      }
    }
  }
}
</script>

<style scoped>
#card{
  width: 100%;
  height: 170px;
  background-color: #fff;
  color: rgb(51,51,51);
}
#avatar{
  width: 100%;
  height: 60%;
  display: flex;
  background: url("../../assets/img/pen-4337521_1280.jpg") no-repeat;
  background-size: 100% 65%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
#avatar *{
  margin: 0;
}
#avatar img{
  width: 25%;
  border-radius: 50%;
}
#avatar img,p:hover{
  transition: all .3s;
  cursor: pointer;
  color: red;
}
#avatar p{
  font-size: 14px;
  font-weight: bold;
}
#number{
  background-color: #fff;
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#number *{
  margin: 0;
}
#number li{
  list-style: none;
  width: 30%;
  border-right: 1px solid #ded1d1;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
#number li:hover{
  color: red;
}
#number li span{
  font-size: 14px;
}
</style>